<template>
	<view class="content">
		<door-navbar :isShowLeft="true" :isShowRight="false" :bgColor="'transparent'" :isbackHone="true">
			<!-- <u-icon name="home" color="#000000" size="40" @click="home()"></u-icon> -->
		</door-navbar>		
		<view class="logo">			
			<u--image src="../../static/image/login_title.png" width="158rpx" height="108rpx" mode="widthFix" class="logoimage" style="margin-bottom: 18rpx;">
			</u--image>
			<!--<u--image src="../../static/image/loginLogo.jpg" width="320rpx" height="80rpx" mode="widthFix" class="logoimage"></u--image>-->
			<u--image src="../../static/image/showLogo.jpg" width="320rpx" height="80rpx" mode="widthFix"></u--image>	
		</view>
		<view class="login_form">
			<u--form labelPosition="top" :model="form" :rules="loginRules" ref="loginForm" :borderBottom="false"
				labelWidth="100%" :labelStyle="{color: '#000000',fontSize: '28rpx',fontWeight: '500'}">				
				<u-form-item label="手机号" :leftIconStyle="{width:'30rpx',height:'36rpx',marginRight:'10rpx'}" prop="phone"><!--leftIcon="../../static/image/mobile.png" -->
					<u--input v-model="form.phone" border="none" :clearable="true" maxlength="11" :customStyle="{...inputStyle}" fontSize="28rpx" placeholderStyle="color:#bbb" placeholder="请输入您的手机号"
						@blur="isFocus = [false, false, false]" @focus="inputFocus(0)">
					</u--input>
				</u-form-item>
				<u-form-item label="验证码" :leftIconStyle="{width:'30rpx',height:'32rpx',marginRight:'10rpx'}" prop="code"><!--leftIcon="../../static/image/person.png" -->
					<u--input v-model="form.code" border="none" maxlength="6" :customStyle="{...inputStyle}" fontSize="28rpx" placeholderStyle="color:#bbb" placeholder="请输入您的验证码"
						@blur="isFocus = [false, false, false]" @focus="inputFocus(1)">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒后重新获取"></u-code>
							<u-button v-if="tips != '获取验证码'" @tap="getCode" :text="tips":custom-style="{
							  padding: '0 12rpx',
							  color: '#fff',
							  fontSize: '28rpx',
							  background:'#b3b3b3',
							  borderColor: '#1cc7c2',
							  border:'0',
							  borderRadius:'50rpx',
							  height: '56rpx',
							  lineHeight: '56rpx',
							  marginRight:'20rpx'
							}">
							</u-button>
							<u-button v-else @tap="getCode" :text="tips":custom-style="{
							  padding: '0 12rpx',
							  color: '#fff',
							  fontSize: '28rpx',
							  background:'#1cc7c2',
							  borderColor: '#1cc7c2',
							  border:'0',
							  borderRadius:'50rpx',
							  height: '56rpx',
							  lineHeight: '56rpx',
							  marginLeft:'20rpx'
							}">
							</u-button>
						</template>
					</u--input>
				</u-form-item>
			</u--form>
			<view class="check" @click="form.checked = !form.checked">
				<u--image v-show="!form.checked" src="../../static/image/image/circle2.png" width="30rpx" height="30rpx"></u--image>
				<u--image v-show="form.checked" src="../../static/image/image/agree2.png" width="30rpx" height="30rpx"></u--image>
				<view class="check_agreement">注册或登录即同意协议</view>
			</view>
			<u-button :custom-style="{
			  marginTop: '100rpx',
			  borderRadius: '50rpx',
			  padding: '28rpx 0',
			  color: '#333',
			  fontSize: '32rpx',
			  background: 'linear-gradient(91.63deg, #1cc7c2 0%, #cdf8f7 137.56%)',
			  borderColor: 'transparent',
			  fontWeight:'800',
			  border:'0',
			  height: '100rpx',
			  lineHeight: '100rpx',			  
			}" @click="submit">提  交</u-button>
		</view>		
		<!--<u-popup :show="isImageVerify" mode="center"  @close="close" :round="20">
			<view style="width:700rpx;height: 470rpx;margin: 0 auto;border-radius: 30rpx;">
				<imageVerify @result="verifySuccess"></imageVerify>				   
			</view>		        
		</u-popup>-->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>	
	export default {
		data() {
			return {
				isDisabled: false,
				isImageVerify:false,
				form: {
					phone: "",
					code: "",
					invite: "",
					checked: false,
					jschecked: false,
				},
				tips: "获取验证码",
				inputStyle: {
					borderBottom: "2rpx solid #ddd",
					borderRadius: "0rpx",
					height: "100rpx",
					lineHeight: "100rpx",
					padding: "0 6rpx",
					boxSizing: "border-box",
					
				},
				loginRules: {
					phone: [{
							required: true,
							message: "请输入手机号",
							trigger: ["change", "blur"],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: "手机号码不正确",
							trigger: ["change", "blur"],
						},
					],
					code: {
						required: true,
						message: "请输入验证码",
						trigger: ["change", "blur"],
					},
				},
				isFocus: [false, false, false],
			};
		},
		onLoad(e) {
			if (e.inviteCode) {
				this.isDisabled = true;
				this.form.invite = e.inviteCode;
			}
		},
		methods: {
			async verifySuccess(){
				uni.showLoading({
					title: "正在获取验证码",
				});						
				let res = uni.request({
					method: 'get',
					url: `${this.$webBaseUrl}/api/nft-school/auth/getPhoneCode`,
					data:{
						phone: this.form.phone,
						type: 1
					}
				})
				this.$refs.uCode.start();
				uni.hideLoading();
				uni.$u.toast("验证码已发送");
			},
			home() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			close() {
				this.isImageVerify = false
			},
			inputFocus(e) {
				this.isFocus = [false, false, false];
				this.isFocus[e] = true;
			},
			codeChange(e) {
				this.tips = e;
			},
			async getCode() {
				if (!this.form.phone) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						title: "失败",
						message: "请先输入手机号码",
					});
					return;
				} else if (!uni.$u.test.mobile(this.form.phone)) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						title: "失败",
						message: "请先输入正确的手机号码",
					});
					return;
				}
				this.verifySuccess();
				//this.isImageVerify = true				
			},
			getUrlParams(name) {
				let local = location.href; 
				var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");				
				if (reg.test(local)) {
					return unescape(RegExp.$2.replace(/\+/g, " "));
				}
				return "";
			},
			// 微信授权
			wxAuthorization(userId) {
				let code = this.getUrlParams("code");				
				//是否存在code
				//如果不存在code则跳转授权
				if (!code) {
					// 本地路径
					let local = `http://time.shudingkj.com/?userId=${userId}`//`http://lmzs.shudingkj.com/?id=${id}`;
					// 公众号或测试号appid
					let appid = "wxae0f0d0aef1a8645";
					//不存在就打开下面的地址进行授权
					let authPageBaseUri = "https://open.weixin.qq.com/connect/oauth2/authorize";
					let scope = 'snsapi_base';
					authPageBaseUri += '?appid=' +  appid + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=' + scope + '&state=STATE#wechat_redirect';
					window.location.href = authPageBaseUri;
				}
			},
			submit() {
				this.$refs.loginForm
					.validate()
					.then((res) => {
						if (!this.form.checked) {
							this.$refs.uToast.show({
								type: "error",
								icon: false,
								title: "失败",
								message: "请先阅读并勾选用户协议",
							});
							return;
						}
						uni.showLoading({
							title: "正在登录中",
						});
						this.$u.api
							.codeLogin({
								userName: this.form.phone,
								phoneCode: this.form.code
							})
							.then((l_reg) => {
								uni.hideLoading()
								uni.clearStorage();
								uni.setStorageSync('userInfo', JSON.stringify(l_reg.data));
								uni.setStorageSync('token', l_reg.data.token);
								uni.setStorageSync('username', l_reg.data.userName);
								uni.setStorageSync('userid', l_reg.data.userId);
								uni.setStorageSync('phone', l_reg.data.phone);								
								if (!l_reg.data.openId) {								
									this.wxAuthorization(l_reg.data.userId);
								}
								uni.reLaunch({
									url: '/pages/index/index'
								})
							})
							.catch((error) => {
								uni.hideLoading()
							});
					})
					.catch((errors) => {
						this.$refs.uToast.show({
							type: "error",
							icon: false,
							title: "失败",
							message: errors[0].message,
						});
					});
			},
		},
	}	
</script>
<style lang="scss">
	.content {
		padding: 100rpx 40rpx;
		background-color: #fff;
		background: url('@/static/image/login_bg.png') no-repeat;
		background-size: 100% 100%;
		.logo {
			&_text {
				line-height: 100rpx;
				font-size: 92rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 66rpx;
				margin-top: 32rpx;
			}
			.logoimage{
				margin-left: 10rpx;
			}
			&_form {
				width: 100%;
			}
		}
		.check {
			// position: absolute;
			// bottom: 50rpx;
			margin-top: 32rpx;
			width: 80vw;
			display: flex !important;
			align-items: center !important;
			justify-content: center;
			color: #ccc;
			margin-left: 14rpx;
			&_agreement {
				margin-left: 10rpx;
				font-size: 24rpx;
			}
		}
		.login_form {
			margin-top: 48rpx;
		}
	}
	/deep/ .uni-input-input{
		color: #333 !important;
	}
	/deep/ .u-input{
		background: transparent !important;
		color: #333 !important;
	}
	/deep/.u-form-item__body__right__message{
		color: #ff2658;
		// margin-left: 40rpx !important;		
	}
</style>
